import React, { Component } from 'react'
import { shopcarlist, delcar, changecar, exitflag, checkall } from '../api/index'
import { SwipeCell, Button, Stepper, Dialog, Flex } from 'react-vant';
import '../car.css';
// import { createHashHistory } from 'history' 
// //返回上一页这段代码
// const history = createHashHistory();
export default class Car extends Component {
    //返回上一页这段代码
    //  goBackPage = () => {
    //     history.goBack();  
    //   }
    state = {
        info: [],
        total: 0,
        ifflag: 1,
        truelist: []
    }
    getlist = async () => {
        let res = await shopcarlist()
        this.setState({
            info: res.data.data,
            truelist: this.state.info.filter((item) => item.flag === 1)
        })
        this.totalcom()
    }
    componentDidMount() {
        this.getlist()
    }
    //删除
    Delcar = (id) => {
        Dialog.confirm({
            title: '删除',
            message: '确认删除吗',
        })
            .then(async () => {
                await delcar({ id })
                this.getlist()
            })
            .catch(() => {
                // on cancel
            });
    }
    num = (value, id) => {
        changecar({ value, id })
        this.getlist()
    }
    flag = async (id, flag) => {
        await exitflag({ id, flag })
        this.getlist()
    }
    allflag = async () => {
        if (this.state.ifflag === 0) {
            await this.setState({
                ifflag: 1
            })
            let res = await checkall()
            console.log(res);
        } else if (this.state.ifflag === 1) {
            this.setState({
                ifflag: 0
            })
        }
    }
    totalcom = () => {
        const all = this.state.truelist.reduce((a, b) => {
            return (a += b.num * b.price);
        }, 0);
        this.setState({
            total: all
        })
        this.getlist()
    };
    render() {
        const { info } = this.state
        return (
            <div className='shopcar_box'>
                <div className='shopdetail_header'>
                    <p onClick={() => { this.props.history.goBack() }}>&lt;&nbsp;返回</p>
                    <p className="go">购物车</p>
                </div>
                <div className='shopcar_main'>
                    {
                        info?.map((item, idx) => {
                            return <SwipeCell
                                key={idx}
                                rightAction={
                                    <Button style={{ height: '100%' }} square type="danger" onClick={() => this.Delcar(item.id)}>
                                        删除
                            </Button>
                                }
                            >
                                <div className="car">
                                    <input type="checkbox" checked={item.flag} onChange={() => { this.flag(item.id, item.flag) }} />
                                    <div className="demo-card">
                                        <img src={item.img} alt="" className="demo-card__img" />
                                        <div className="demo-card__content">
                                            <p>{item.title}</p>
                                            <Stepper value={item.num} theme="round" buttonSize="22" disableInput onChange={(value) => { this.num(value, item.id) }} className="num" />
                                            <Flex justify="between" align="center">
                                                <p className="price">¥{item.price}</p>
                                                <p className="num1">X{item.num}</p>
                                            </Flex>
                                        </div>
                                    </div>
                                </div>
                            </SwipeCell>
                        })
                    }
                </div>
                <div className='shopcar_foot'>
                    <span> <input type="radio" checked={this.state.ifflag} onChange={() => { this.allflag() }} />全选</span>
                    <span className="toget">总价:{this.state.total}</span>
                </div>
            </div>
        )
    }
}
